<template>
	<view class="box">
		<view class="menu" v-for="(item,index) in data" :key="index" >
			<view class="menu-item-title">
				{{item.title}}
			</view>
			<view 
				:class="!element.url && menu_id == element.menu_id?'menu-body hidden':''" 
				 v-for="(element,key) in item.children" :key="key" 
			>
				<view class="menu-item-sapce"
					:class="menu_id == element.menu_id || menuId[0] == element.menu_id? 'menu-item-sapceSelect':''" 
					@click="clickItem(element)" 
				>
					<text :class="`iconfont ${element.icon}`"></text>
					<text class="text" v-if="!eventFolds" >
						{{element.title}}
					</text>
					<view class="right" v-if="!element.url"  >
						<text  v-if="menu_id == element.menu_id"  class="iconfont icon-xuanzeqizhankai"></text>
						<text v-else class="iconfont icon-xiangzuo"></text>
					</view>
				</view>
				<menu-space :menuId="menuId" v-if="!element.url && menu_id == element.menu_id" :data="element.children" ></menu-space>
			</view>
		</view>
	</view>
</template>

<script>
	let isExecuted = false;
	export default {
		name:"menu-item",
		props:{
			data:{
				type: Array
			},
			menuId:{
				type: Array
			}
		},
		data() {
			return {
				selected:false,
				menu_id:null,
				eventFolds:false,
			};
		},
		watch: {
			eventFold(e){
				this.eventFolds = e
			}
		},
		computed: {
			eventFold() { return this.$store.state.eventFold } ,
			checkedMenuId(){
				return this.menuId ;
			}
		},
		mounted() {
			const _this = this ;
			uni.$on('currentMenuId',function(data){
				_this.menu_id = data.currentMenuId[0] ;
			})
		},
		methods:{
			clickItem(element){
				if(element.url){
					this.goUrl( element.url ) ;
				}
				if(this.menu_id != element.menu_id) this.menu_id = element.menu_id ;
				else this.menu_id = null
			},
			goUrl(Url){
				uni.navigateTo({
					url:Url
				})
			}
		}
	}
</script>

<style scoped lang="scss" >
	$menu-item-title:#98a4af;
	$menu-item-sapce:#869fb1;
	.menu{
		font-size:13px;
		padding:10px 0px;
		border-bottom:2px solid #181818;
		transition:1s;
		.menu-body{
			border-left: 5px solid $uni-color-primary;
			// opacity: 0;
			// transform: translate(0,-30px) ;
			// animation: fadeInLeft .6s ease forwards;
		}
		.menu-item-sapce{
			color:$menu-item-sapce;
			display: flex; 
			align-items:center;
			padding:15px 20px;
			font-weight:bold;
			.right{
				padding-top:2px;
				.iconfont{
					font-weight: bold;
					font-size: 12px;
				}
			}
			.text{
				flex:1;
			}
			.iconfont{
				flex:0.178;
				font-weight:400;
				font-size:16px;
			}
		}
		.menu-item-sapceSelect,.menu-item-sapce:hover{
			cursor:pointer;
			background: #131e26;
			color:#fff;
		}
		.menu-item-title{
			color:$menu-item-title;
			font-size:12px;
			padding:10px ;
		}
		
	}
	@keyframes fadeInLeft {
		to {
			opacity: 1;
			transform: translate(0);
		}
	}
</style>